<template>
	<view class="user">
		<!-- 个人信息 -->
		<view class="header" @click="userDetail">
			<view class="head-1">
				<u-image :src="userInfo.face || userImage" border-radius="50%" width="96rpx" height="96rpx"
					mode="aspectFill"></u-image>
			</view>
			<view class="head-2" v-if="userInfo.id">
				<view class="user-name">{{ userInfo.nickName }}</view>
			</view>
			<view class="head-2" v-else>
				<view class="user-name">点击登录</view>
			</view>
			<!-- <u-button @click="linkMsgDetail">我的消息</u-button> -->
		</view>
		<!-- 历史记录 -->
		<view class="mygame-box">
			<view class="myGame-title">
				<view class="icon">
					<u-image src="/static/img/myGames.svg" width="48rpx" height="48rpx" :show-loading="false"
						mode="aspectFit"></u-image>
				</view>
				<view class="title">
					{{collectionsType[0].name}}
				</view>
			</view>
			<u-line class="u-line"></u-line>
			<view class="myGame-content">
				<view class="noData" v-if="myGamesData.length<1">
					暂无数据
				</view>
				<view class="goods-list">
					<view v-if="item_index<3" @click="handleClick(item)" class="goods-item"
						v-for="(item, item_index) in myGamesData" :key="item_index">
						<view class="goods-img">
							<u-image :src="item.bannerUrl" height="240rpx" border-radius="20" mode="aspectFill"
								width="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="goods-desc">
							<view class="goods-title">
								{{ item.goodsName }}
							</view>
						</view>
					</view>
					<view class="openMore" @click="openMore(collectionsType[0].name)" v-if="myGamesData.length>3">
						<u-icon name="arrow-right" size="36" color="#C0C0C0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的游戏 -->
		<view class="mygame-box">
			<view class="myGame-title">
				<view class="icon">
					<u-image src="/static/img/myAppoint.svg" width="48rpx" height="48rpx" mode="aspectFit"></u-image>
				</view>
				<view class="title">
					{{collectionsType[1].name}}
				</view>
			</view>
			<u-line class="u-line"></u-line>
			<view class="myGame-content">

				<view v-if="myAppointData.length<1" class="noData">
					暂无数据
				</view>
				<view class="goods-list">
					<view v-if="item_index<3" @click="handleClick(item)" class="goods-item"
						v-for="(item, item_index) in myAppointData" :key="item_index">
						<view class="goods-img">
							<u-image :src="item.bannerUrl" :show-loading="false" height="240rpx" border-radius="20"
								mode="aspectFill" width="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="goods-desc">
							<view class="goods-title">
								{{ item.goodsName }}
							</view>
						</view>
					</view>
					<view class="openMore" @click="openMore(collectionsType[1].name)" v-if="myAppointData.length>3">
						<u-icon name="arrow-right" size="36" color="#C0C0C0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的预约 -->
		<view class="mygame-box">
			<view class="myGame-title">
				<view class="icon">
					<u-image src="/static/img/myCollect.svg" :show-loading="false" width="48rpx" height="48rpx"
						mode="aspectFit"></u-image>
				</view>
				<view class="title">
					{{collectionsType[2].name}}
				</view>
			</view>
			<u-line class="u-line"></u-line>
			<view class="myGame-content">
				<view class="noData" v-if="myCollectData.length<1">
					暂无数据
				</view>
				<view class="goods-list">
					<view v-if="item_index<3" @click="handleClick(item)" class="goods-item"
						v-for="(item, item_index) in myCollectData" :key="item_index">
						<view class="goods-img">
							<u-image :src="item.bannerUrl" :show-loading="false" border-radius="20" height="240rpx"
								mode="aspectFill" width="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="goods-desc">
							<view class="goods-title">
								{{ item.goodsName }}
							</view>
						</view>
					</view>
					<view class="openMore" @click="openMore(collectionsType[2].name)" v-if="myCollectData.length>3">
						<u-icon name="arrow-right" size="36" color="#C0C0C0"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getCouponsNum,
		getFootprintNum
	} from "@/api/members.js";
	import {
		getUserWallet
	} from "@/api/members";
	import {
		getCollectionGoodsList,
		getCollectionGoodsPageList
	} from "@/api/goods.js"
	import configs from '@/config/config'
	export default {
		components: {
		},
		data() {
			return {
				configs,
				userImage: configs.defaultUserPhoto,
				coverTransform: "translateY(0px)",
				coverTransition: "0s",
				moving: false,
				userInfo: {},
				couponNum: "",
				footNum: "",
				walletNum: "",
				myGamesData: [],
				myAppointData: [],
				myCollectData: [],
				collectionsType: [{
					name: '历史记录',
					key: 'MY_HISTORY',
					field: 'myGamesData'
				}, {
					name: '我的购买',
					key: 'MY_GAME',
					field: 'myAppointData'
				}, {
					name: '我的预约',
					key: 'MY_Appoint',
					field: 'myCollectData'
				}]
			};
		},
		onLoad() {},
		onShow() {
			this.userInfo = this.$options.filters.isLogin() || {};
			if (this.$options.filters.isLogin("auth")) {

			}
		},
		onPullDownRefresh() {
			this.userInfo = this.$options.filters.isLogin();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navigateTo("/pages/mine/set/setUp");
			}
		},
		// #endif

		mounted() {
			this.getGoods(this.collectionsType[0].key);
			this.getGoods(this.collectionsType[1].key);
			this.getGoods(this.collectionsType[2].key);
		},
		methods: {
			linkMsgDetail() {
				uni.navigateTo({
					url: `/pages/mine/im/list`,
				});
			},
			getGoods(collection) {
				let params = {
					pageNumber: 1,
					pageSize: 10,
					collection: collection,
					field: ''
				}
				switch (collection) {
					case this.collectionsType[0].key:
						params.field = this.collectionsType[0].field
						break;
					case this.collectionsType[1].key:
						params.field = this.collectionsType[1].field
						break;
					case this.collectionsType[2].key:
						params.field = this.collectionsType[2].field
						break;
				}
				this.setGoods(params)
			},
			async setGoods(params) {
				const res = await getCollectionGoodsPageList(params);
				if (res.data.success) {
					const resData = res.data.result.records
					let resultData = this.getResultData(resData)
					this.$set(this, params.field, resultData)
					// console.log(resultData, 'resultData---------')
				}
			},
			/**
			 * @desc 解析商品JSON数据
			 */
			getResultData(data = []) {
				let result = data.map(option => {
					if (!option.sellingPoint) return option
					try {
						return {
							...option,
							...JSON.parse(option.sellingPoint)
						}
					} catch {
						this.$u.toast(`数据解析失败，请检查【${option.goodsName}】数据格式`);
					}
				})

				return result.sort(this.compare).slice(0, 4)
			},
			/**
			 * @desc 根据weight权重字段排序 值越大越靠前
			 * @param {Object} a
			 * @param {Object} b
			 */
			compare(a, b) {
				if (!a.weight && !b.weight) {
					return 0; // 如果两者都没有weight，则认为它们相等
				}
				if (!a.weight) {
					return 1; // 如果a没有weight，认为它大于b
				}
				if (!b.weight) {
					return -1; // 如果b没有weight，认为它小于a
				}
				return b.weight - a.weight; // 否则，根据weight值进行比较,值越大越靠前
			},




			openMore(collection) {
				uni.navigateTo({
					url: `/pages/mine/collectionGames?collection=${collection}`,
				});
			},
			handleClick(detail) {
				// 进入游戏首页,根据游戏id获取首页详情
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${detail.id}`,
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			userDetail() {
				this.userInfo.id ?
					this.navigateTo("/pages/mine/set/personMsg") :
					this.$options.filters.navigateToLogin();
			},

		},
	};
</script>

<style lang="scss" scoped>
	html,
	body {
		overflow: auto;
	}

	.money {
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user {
		// background-color: #F5F5F5;
		padding: 0 44rpx 36rpx 44rpx;

		.header {
			// background: #FFFFFF;
			border-radius: 20rpx;
			padding: 180rpx 0 48rpx 0;
			color: #181818;
			display: flex;
			justify-content: space-between;


			.user-name {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.head-1 {
				display: flex;
				align-items: center;
			}

			.head-2 {
				flex: 1;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
			}

			/deep/ .u-icon,
			.u-icon {
				margin-top: 106rpx;
			}
		}

		.mygame-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 42rpx 26rpx 26rpx 26rpx;
			margin-bottom: 16rpx;

			.myGame-title {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.icon {
					margin-right: 12rpx;
				}

				.title {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #181818;
				}
			}

			.myGame-content {
				padding: 26rpx 0 0 0;

				.noData {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #979797;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 36rpx;
				}
			}
		}


	}



	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;

		.openMore {
			width: 76rpx;
			// padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// flex: 1;
		}
	}

	.goods-item {
		min-width: 162rpx;
		max-width: 180rpx;
		flex: 1;
	}

	.goods-img {
		margin-right: 24rpx;
		margin-bottom: 10rpx;
	}

	.goods-desc {
		>.goods-title {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #979797;
		}

	}
</style>